<template>
  <div class="account-payment">
    <el-form-item :label="`本次${labelText}金额`" prop="totalAmount">
      <el-input v-model="formData.totalAmount" />
    </el-form-item>
    <el-form-item :label="`${labelText}日期`" prop="paymentDate">
      <el-date-picker style="flex: 1" v-model="formData.paymentDate" type="date" placeholder="请选择" value-format="YYYY-MM-DD" />
    </el-form-item>
    <el-form-item label="付款账户" prop="paymentAccountId" v-if="formLabelVal == 'payment'">
      <el-select v-model="formData.paymentAccountId">
        <!--        :label="splicing(cleanArray([item.dictName, item.account, item.accountName]), '-')"-->
        <el-option
          v-for="item in paymentAccountList"
          :key="item.accountId"
          :value="item.accountId"
          :label="splicing(cleanArray([item.accountName]), '-')"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="收款账户" prop="receivingAccountId">
      <el-select v-model="formData.receivingAccountId">
        <!--        :label="splicing(cleanArray([item.dictName, item.account, item.accountName]), '-')"-->
        <el-option
          v-for="item in receivingAccountList"
          :key="item.accountId"
          :value="item.accountId"
          :label="splicing(cleanArray([item.accountName]), '-')"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="支付凭证" prop="paymentVoucherList">
      <div>
        <el-upload class="avatar-uploader" multiple :show-file-list="false" :http-request="customRequest">
          <div class="list">
            <div class="code" v-for="item in formData.paymentVoucherList" :key="item">
              <img :src="item.fileUrl" />
              <div class="del">
                <el-icon @click.stop="delImg(item)">
                  <DeleteFilled />
                </el-icon>
              </div>
            </div>
            <el-icon class="upload" v-if="formData.paymentVoucherList.length < 6">
              <Plus />
              <span>点击上传</span>
            </el-icon>
          </div>
        </el-upload>
        <div class="tip">注：支持{{ fileType }}格式，单张大小不超过{{ maxSize }}MB，只支持6张</div>
      </div>
    </el-form-item>
  </div>
</template>
<script setup>
import { Plus } from "@element-plus/icons-vue";
import { ref, computed } from "vue";
import { splicing, cleanArray } from "@/utils";
import { ElMessage } from "element-plus";
import uploadFile from "@/utils/uploadFile";

const props = defineProps(["modelValue", "formLabelVal", "paymentAccountList", "receivingAccountList"]);
const labelText = computed(() => (props.formLabelVal == "payment" ? "付款" : "收款"));
const $emit = defineEmits(["update:modelValue"]);
const formData = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    $emit("update:modelValue", val);
  }
});

/**
 * 自定义上传
 */
const maxSize = ref(20);
const isImgMax = ref(false);
const fileType = ref("JPG/JPEG/PNG");
const customRequest = async options => {
  const type = ["image/jpg", "image/jpeg", "image/png"];
  const { file } = options;
  if (!type.includes(file.type)) {
    ElMessage.error("图片格式错误");
    return false;
  } else if (file.size / 1024 / 1024 > maxSize.value) {
    ElMessage.error(`图片大小不能超过${maxSize.value}MB!`);
    return false;
  }
  const fileInfo = await uploadFile(options);
  if (formData.value.paymentVoucherList.length < 6) {
    formData.value.paymentVoucherList.push({ fileUrl: fileInfo.url, fileName: fileInfo.name, fileId: fileInfo.uid.toString() });
  } else {
    if (!isImgMax.value) ElMessage.error("最多上传6张图片");
    isImgMax.value = true;
  }
};
const delImg = img => {
  formData.value.paymentVoucherList = formData.value.paymentVoucherList.filter(item => item.fileId != img.fileId);
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
